<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>涂鸦板</title>
<style type="text/css">
	#mycanvas {
		border: 1px solid black
	}
</style>
</head>
<body>
	<canvas width="800"height="560"id="mycanvas">您的浏览器不支持H5元素canvas绘图</canvas>
	<p>上面的面板下鼠标按下移动即可涂鸦</p>
</body>
</html>
<script type="text/javascript">//定义canvas，和画笔
var canvas, pen, mousePress, last = null;

canvas = document.getElementById("mycanvas")
pen = canvas.getContext("2d")
// 设置画笔
pen.width = 1
pen.strokeStyle ='blue'//返回当前鼠标的坐标
function pos(event) {
	var ex,ey
	ex = event.clientX
	ey = event.clientY
	return {
		x: ex, y:ey
	}
}

function start() {
	mousePress = true
}

function draw(event) {
	// 鼠标没有按下就移动则退出
	if(!mousePress) return 
	var xy = pos(event)
	if(last != null) {
		// 开始绘图
		pen.beginPath()
		// 开始上一次最后的绘画结束点
		pen.moveTo(last.x, last.y)
		// 画到当前的鼠标移动的卓坐标点
		pen.lineTo(xy.x, xy.y);
		pen.stroke()
	}
	
	// 记住的最后绘画的坐标点
	last = xy
}

function finsh() {
	mousePress = false
	last = null
}

canvas.onmousedown = start
canvas.onmousemove = draw
canvas.onmouseup = finsh
</script>